<template>
  <div class="home-product-recommend">
    <item-title title="畅销好物" more-text="更多好物" more-url="/product/list" v-if="false" />
    <ul class="list">
      <li v-for="(item, index) in home.recommend" :key="index" class="list-item" @click="handleClick(item)">
        <div class="image">
          <img v-lazy="item.mainImage.path" v-if="item.mainImage && item.mainImage.path" />
        </div>
        <div class="desc">
          <p class="title">{{ item.title }}<span>￥{{ +item.price }}</span></p>
          <p class="title_sub">{{ item.title_sub }}</p>
          <p class="price_old" v-if="false">{{ item.title_sub }}</p>
          <!--<p class="price">￥{{ +item.price }}</p>-->
          <p class="button" v-if="false">立即购买</p>
        </div>
      </li>
    </ul>
    <div v-if="false" class="more" @click="$router.push('/product/list')">点击查看更多好物...</div>
  </div>
</template>

<script>
import ItemTitle from './_ItemTitle'
export default {
  name: 'HomeProductRecommend',
  props: ['home'],
  components: {
    ItemTitle
  },
  data() {
    return {
    }
  },
  methods: {
    handleClick(item) {
      this.$router.push(`/product/detail/${item.id}`)
    }
  }
}
</script>

<style scoped lang="stylus">
.home-product-recommend
  //margin 0 10px
  //background red
  .list
    .list-item
      //display flex
      background white
      //margin 7.5px 0
      border-radius 5px
      //padding 10px
      padding-bottom 20px
      .image
        //width 120px
        //height 120px
        //padding 5px
      .desc
        flex 1
        //text-align left
        position relative
        margin-top 10px
        .title
          line-height 20px
          font-weight 700
          font-size 16px
          span
            color red
            font-weight 700
        .title, .title_sub
            height 25px
            line-height 25px
        .title_sub
          color #ccc
        .price_old, .price
          //height 25px
          line-height 18px
        .price
          //color $second_color
          color red
          font-weight 700
          font-size 16px
          height 40px
          line-height 40px
        .price_old
          color #808080
          //text-decoration line-through
        .button
          position absolute
          background $main_color
          color white
          padding 7.5px 15px
          right 0
          bottom 0
          border-radius 15px
          letter-spacing 1.2px
          font-weight 500
  .more
    margin 10px 0
    background white
    height 35px
    line-height 35px
    border-radius 10px
    letter-spacing 1px
</style>
